<div id="services" class="tab-section">
  <div role="tabpanel">
  {{#if (gt items.length 0) }}
    <input type="checkbox" id="toolbar-toggle" />
    <SearchBar
      @placeholder="Search by name/port"
      @value={{search}}
      @onsearch={{action (mut search) value="target.value"}}
    />
  {{/if}}
    <ChangeableSet @dispatcher={{searchable 'nodeservice' items}} @terms={{search}}>
      <BlockSlot @name="set" as |filtered|>
          <TabularCollection
            data-test-services
            @items={{filtered}} as |item index|
          >
              <BlockSlot @name="header">
                  <th>Service</th>
                  <th>Port</th>
                  <th>Tags</th>
              </BlockSlot>
              <BlockSlot @name="row">
                  <td data-test-service-name={{item.Service}}>
                    <a href={{href-to 'dc.services.show' item.Service}}>
                  {{#let (service/external-source item) as |externalSource| }}
                    {{#if externalSource }}
                      <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
                    {{else}}
                      <span></span>
                    {{/if}}
                  {{/let}}
                      {{item.Service}}{{#if (not-eq item.ID item.Service) }}&nbsp;<em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}
                    </a>
                  </td>
                  <td data-test-service-port={{item.Port}} class="port">
                      {{item.Port}}
                  </td>
                  <td data-test-service-tags>
                    <TagList @item={{item}} />
                  </td>
              </BlockSlot>
          </TabularCollection>
      </BlockSlot>
      <BlockSlot @name="empty">
        <p>
          There are no services.
        </p>
      </BlockSlot>
    </ChangeableSet>
  </div>
</div>